<template>
  <div class="album-detail" @click.self="$emit('close')">
    <div class="content">
      <div class="close" @click="$emit('close')">X</div>
      <div class="cover">
        <img :src="album.cover" alt="">
      </div>
      <div class="name">
        唱片名称: {{ album.album }}
        <br/>
        歌手名称: {{ album.singer }}
      </div>
      <star-box
        :star="album.star"
        @change="$emit('change', $event)"
      />
      <div class="info">{{ album.info }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // Object 或者 Array 类型的 props, 默认值必须是方法
    album: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mounted() {
    // this 是 AlbumDetail 组件的实例
    // this.$parent 是父组件的实例
    // this.$parent.$parent 是父组件的父组件的实例
    // this.$children 是所有的子组件的实例组成的数组
    console.log('this', this);
  }
}
</script>


<style lang="sass">
.album-detail
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgba(0, 0, 0, .8)
  overflow: scroll
  .content
    text-align: left
    margin: 10% auto
    max-width: 500px
    background: #fff
    border-radius: 5px
    padding: 20px
    position: relative
    .close
      position: absolute
      top: 20px
      right: 20px
      width: 40px
      line-height: 40px
      border-radius: 50%
      background: #fff
      text-align: center
      font-weight: bold
      cursor: pointer
      // -webkit-font-smoothing: default
    .cover
      margin: -20px -20px 20px
      img
        width: 100%

</style>
